<template>
    <el-container class="dashboard_container">
        <el-main>
            <template v-if="component">
                <components :is="component" />
            </template>
            <template v-else>
                <el-card class="box-card">
                </el-card>
            </template>
        </el-main>
    </el-container>
</template>

<script>
import dashboard from '@common/dashboard'
import { mapState } from "vuex";
export default {
    name: "index",
    data() {
        return {
            component: undefined,
        };
    },
    computed: {
        ...mapState([ 'application' ]),
    },
    watch: {
        application: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            if (this.$utils.isEmpty(this.application)) {
                return;
            }
            this.component = dashboard[`${ this.application }Dashboard`];
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.dashboard_container {
    width: 100%;
    height: 100%;
    overflow: hidden;

    /deep/.el-card__body {
        width: 100%;
        height: 100%;
    }
}
</style>
